<template>
  <u-popup v-model="visible" :mode="mode" border-radius="24">
    <template v-if="title">
      <view class="flex j-c padv26 font30">{{ title }}</view>
      <u-gap height="1" bg-color="#eee"></u-gap>
    </template>
    <view class="padh40" :style="{ height: height + 'rpx' }">
      <slot></slot>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "my-popup",
  props: {
    mode: {
      type: String,
      default: "bottom",
    },
    height: {
      type: Number | String,
      default: 600,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    show() {
      this.visible = true;
      this.$emit("open");
    },
    hide() {
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="scss"></style>
